<template>
    <div class="find-content">
        <div class="find-title">发现</div>
        <div>
            <div class="find-page-head-banner">
                <div class="logo"></div>
                <div class="banner">
                    <img src="../../assets/img/find.png" alt="">
                </div>
            </div>
            <div class="find-list">
                <div class="find-list-title">超级热门</div>
                <ul class="games">
                    <li class="game" @click="changeRoute('/game')">
                        <div class="game-icon">
                            <img src="../../assets/img/game1.jpeg" alt="">
                        </div>
                        <div class="game-content">
                            <div class="game-tit">ATT开启火爆兑换</div>
                            <div class="game-txt">三天后空投BTT</div>
                        </div>
                    </li>
                    <li class="game">
                        <div class="game-icon">
                            <img src="../../assets/img/game2.png" alt="">
                        </div>
                        <div class="game-content">
                            <div class="game-tit">Heartbest Game</div>
                            <div class="game-txt">玩游戏得分红</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="find-more">
                第三方DAPP合作请联系客服<br>
                所有DAPP玩法请咨询相应开发商
            </div>
        </div>
        <NavComponent></NavComponent>
    </div>
</template>

<script>
    export default {
        name: 'find'
    }
</script>

<style lang="scss">
    .find-content{
        width: 100%;
        height: 100%;
        background-color: #F7F7F7;
        .find-title{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: 0.34rem;
            border-bottom: 0.02rem solid #ccc;
            background-color: #fefefe;
        }
        .find-page-head-banner{
            padding: 0.3rem 0 0.01rem;
            background-color: #fefefe;
            .logo{
                width: 1.25rem;
                height: 0.4rem;
                margin-bottom: 0.14rem;
                margin-left: 0.14rem;
                background: url(../../assets/img/logo.png) no-repeat;
                background-size: contain;
            }
            .banner{
                width: 100%;
                height: 3.74rem;
                text-align: center;
                background-color: #fff;
                img{
                    width: 91.5%;
                    border-radius: 0.13rem;
                    padding-bottom: 0.25rem;
                }
            }
        }
        .find-list{
            margin-top: 0.1rem;
            background-color: #fefefe;
            padding-top: 0.25rem;
            .find-list-title{
                font-size: 0.32rem;
                color: #333;
                border-left: 0.08rem solid #e60816;
                line-height: 0.32rem;
                padding-left: 0.12rem;
                margin-left: 0.32rem;
                margin-bottom: 0.2rem;
            }
            li, ul{
                list-style: none;
            }
            .games{
                padding-left: 0.32rem;
                border-top: 0.01rem solid #efefef;
                .game{
                    display: flex;
                    height: 1.76rem;
                    position: relative;
                    .game-icon{
                        padding: 0.32rem 0.32rem 0 0;
                        img{
                            width: 1.12rem;
                        }
                    }
                    .game-content{
                        width: 100%;
                        border-bottom: 0.02rem solid #eee;
                        .game-tit{
                            font-size: 0.36rem;
                            color: #333;
                            margin-top: 0.42rem;
                        }
                        .game-txt{
                            font-size: 0.28rem;
                            color: #999;
                            margin-top: 0.06rem;
                        }
                    }
                }
                .game:after{
                    display: block;
                    position: absolute;
                    right: 0.2rem;
                    top: 0.66rem;
                    content: "";
                    width: 0.44rem;
                    height: 0.44rem;
                    background: url(../../assets/img/next.png);
                    background-size: 100%;
                }
            }
        }
        .find-more{
            color: #777;
            text-align: center;
            margin: 0.8rem auto;
            font-size: 0.24rem;
        }
    }
</style>
